<template>
    <div>
        <div class="backbtn">
            <i class="el-icon-arrow-left" @click="goBack()"></i>
        </div>
        <el-form :model="userForm" ref="userForm" label-width="15vw">
            <el-form-item label="头像">
                <label for="img_upload">
                    <el-avatar v-if="!userForm.imgbase" icon="el-icon-user-solid"></el-avatar>
                    <el-avatar v-if="userForm.imgbase" :src="userForm.imgbase"></el-avatar>
                </label>
                <input type="file" id="img_upload"/>
            </el-form-item>
            <el-form-item label="用户名" prop="uname">
                <el-input v-model="userForm.uname"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenum">
                <el-input v-model="userForm.phonenum"></el-input>
            </el-form-item>
            <div class="regbtn">
                <div class="zhuce" @click="onSubmit()">立即注册</div>
            </div>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "register",
        data() {
           return {
               userForm: {
                   uname: '',
                   phonenum: '',
                   imgbase: ''
               }
           }
        },
        methods: {
            onSubmit() {
                if (this.userForm.uname && this.userForm.phonenum) {
                    this.$http.post('/api/register', this.userForm)
                        .then(({data, config}) => {
                            if (data.code == 200) {
                                this.$message({
                                    message: '注册成功',
                                    type: 'success'
                                });
                                this.$router.push('/login')
                            } else {
                                this.$message({
                                    message: '注册失败',
                                    type: 'warning'
                                })
                            }
                        })
                } else {
                    this.$message({
                        message: '请输入用户名和手机号码！',
                        type: 'warning'
                    })
                }
            },
            goBack() {
                this.$router.back(-1)
            }
        },
        mounted() {
            let _this = this;
            let img_upload = document.getElementById("img_upload");
            img_upload.addEventListener('change', function readFile() {
                let file = this.files[0];
                if(!/image\/\w+/.test(file.type)) {
                    alert("请确保文件为图像类型");
                    return false;
                }
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    _this.userForm.imgbase = this.result;
                }
            },false);
        }
    }
</script>

<style scoped>
.el-icon-arrow-left {
    font-size: 50px;
    padding: 40px;
}
.el-form-item {
    padding-right: 30px;
}

#img_upload {
    position: relative;
    top: -15px;
    visibility: hidden;
}
#img, .el-avatar {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
}
.el-avatar--icon {
    font-size: 40px;
}

.el-form {
    padding: 30px;
}
.el-form-item__label {
    font-size: 30px;
}

.regbtn, .zhuce {
    display: flex;
    justify-content: center;
    align-items: center;
}
.zhuce {
    width: 300px;
    height: 80px;
    font-size: 28px;
    margin-top: 20px;
    color: #fff;
    border-radius: 50px;
}
.zhuce {
    background-color: #00c6ff;
}
</style>